<template>
	<view class="register">
		<uni-forms :modelValue="ReForm" class="form" :rules="rules" ref="form">
			<uni-forms-item label="电话" required name="count">
				<uni-easyinput placeholder="请输入账号(手机号码)" v-model="ReForm.tel"/>
			</uni-forms-item>
			<uni-forms-item label="身份证" required name="ID">
				<uni-easyinput placeholder="请输入身份证" v-model="ReForm.ID"/>
			</uni-forms-item>
			<uni-forms-item label="密码" required name="pwd">
				<uni-easyinput placeholder="请输入密码" v-model="ReForm.pwd" type="password"/>
			</uni-forms-item>
			<uni-forms-item label="密码" required name="pwd">
				<uni-easyinput placeholder="请输入密码" v-model="rePwd" type="password"/>
			</uni-forms-item>
		</uni-forms>
		<view class="btns" >
			<button type="primary" @click="register()">注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rePwd:"",
				ReForm:{
					tel:"",
					ID:"",
					pwd:""
				},
				rules:{
					tel:{
						rules:[
							{
								required: true,
								errorMessage: '请输入手机号码',
								
							},
							{
								pattern:/^1[34578][0-9]{9}$/,
								errorMessage: '手机号码格式错误',
							}
						]
					},
					ID:{
						rules:[
							{
								required: true,
								errorMessage: '请输入身份证',
							},
							{
								pattern:/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/,
								errorMessage: '身份证格式错误',
							}
						]
					},
					pwd:{
						rules:[
							{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
								errorMessage: '密码格式错误',
							}
						]
					},
					rePwd:{
						rules:[
							{
								required: true,
								errorMessage: '请再次输入密码',
							},
							{
								pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
								errorMessage: '再次输入密码格式错误',
							}
						]
					}
				}
			}
		},
		methods: {
			register(){
				// 注册调用接口
				let user={
					tel:this.ReForm.tel,
					ID:this.ReForm.ID,
					pwd:this.ReForm.pwd
				}
				user=JSON.stringify(user)
				this.$request('/api/news', user,'get').then(res => {
					// 打印调用成功回调
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
				this.$refs.form.validate().then(res=>{
					if(this.ReForm.pwd===this.rePwd){
						uni.navigateTo({
							url:'../login/login'
						})
					}else{
						uni.showToast({
							title:"确认密码与密码不同",
							icon:'error'
						})
					}
					console.log('表单数据信息：', res);
					
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
					
			}
		}
	}
</script>

<style scoped lang="scss">
	.register{
		width: 100%;
		height: 100%;
		background: url('../../static/imgs/bg1.png') no-repeat;
		background-size: cover;	
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.form{
			background-color: rgb(255,255,255);
			padding: 30px;
			border-radius: 30px;
		}
		.btns{
			width: 70%;
			margin-top: 30px;
		}
	}
</style>
